<template>
  <transition name="opacity">
    <div id="my_alert" :class="isShow?'show':'hide'">
      <div class="alert_box">
        <div class="alert_body">
          <p class="title large-text text-black">{{alertData.title}}</p>
          <p v-if="alertData.content" class="content normal-text text-black">{{alertData.content}}</p>
          <img v-if="alertData.iconSrc" class="alert_icon" :src="alertData.iconSrc" />
        </div>
        <div class="btns flex f_j_c">
          <div
            v-if="alertData.cancelText"
            class="alert_btn"
            @click="alertData.cancelFn()"
          >{{alertData.cancelText}}</div>
          <div
            v-if="alertData.confirmText"
            class="alert_btn confirm_btn"
            @click="alertData.confirmFn()"
          >{{alertData.confirmText}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "Alert",
  data() {
    return {
      isShow: false,
      hasAnimate: true,
      alertData: {
        that: "",
        title: "",
        content: "",
        confirmText: "",
        confirmFn: "",
        cancelText: "",
        cancelFn: ""
      }
    };
  },
  created() {
    var _this = this;
    alphaHub.$on("showAlert", function(data) {
      _this.alertData.confirmFn =
        typeof data.confirmFn == "function"
          ? data.confirmFn
          : data.that[data.confirmFn] || _this.defaultConfirm;
      _this.alertData.cancelFn =
        typeof data.cancelFn == "function"
          ? data.cancelFn
          : data.that[data.cancelFn] || _this.defaultCancel;
      _this.alertData.title = data.title;
      _this.alertData.content = data.content;
      _this.alertData.iconSrc = data.iconSrc || "";
      _this.alertData.confirmText = data.confirmText;
      _this.alertData.cancelText = data.cancelText || "知道了";
      _this.isShow = true;
    });
    alphaHub.$on("hideAlert", function(reload = false) {
      console.log("reload:", reload);
      _this.resetAlert();
      if (reload) {
        console.log(2);
        window.location.reload();
      }
    });
  },
  computed: {},
  methods: {
    defaultConfirm: function() {
      this.resetAlert();
    },
    defaultCancel: function() {
      this.resetAlert();
    },
    resetAlert: function() {
      this.isShow = false;
      this.alertData = {
        title: "",
        content: "",
        confirmText: "",
        confirmFn: "",
        cancelText: "",
        cancelFn: ""
      };
    }
  },
  destroyed: function() {
    alphaHub.$off("showAlert");
    alphaHub.$off("hideAlert");
  }
};
</script>

<style scoped lang="scss">
#my_alert {
  top: 0;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
  z-index: 1001;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
}
.alert_box {
  overflow: hidden;
  border-radius: 30px;
  width: 530px;
  background: white;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.alert_body {
  padding: 10px 0;
  padding-bottom: 13px;
  .title {
    text-align: center;
    padding: 10px 0;
  }
  .alert_icon {
    position: relative;
    margin: 20px auto;
    height: 84px;
    width: 118px;
  }
  .content {
    min-height: 100px;
    padding: 10px 36px;
    margin-bottom: 34px;
    text-align: center;
  }
}
.btns {
  border-top: 1px solid #e6e6e6;
  .alert_btn {
    width: 50%;
    text-align: center;
    background: white;
    color: #007aff;
    font-size: 32px;
    padding: 16px 0;
  }
  .confirm_btn {
    border-left: 1px solid #e6e6e6;
  }
}
.show {
  transform: scale(1);
  -webkit-transform: scale(1);
  opacity: 1;
}
.hide {
  transform: scale(0);
  -webkit-transform: scale(0);
  opacity: 0;
}
</style>